<template>
    <div class="index-page">
        <div class="card-list">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>成果转化</span>
                    <el-tag style="float: right;" size="mini" effect="dark">总计</el-tag>
                </div>
                <h2>46</h2>
                <span>较上年同期提升</span>
                <span style="color: #1890ff;float:right;">
                    <span>3</span>
                    <span class="el-icon-top"></span>
                </span>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>审核通过</span>
                    <el-tag style="float: right;" type="success" size="mini" effect="dark">本年</el-tag>
                </div>
                <h2>126</h2>
                <span>较上年同期提升</span>
                <span style="color: #13ce66;float:right;">
                    <span>20%</span>
                    <span class="el-icon-top"></span>
                </span>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>审核中</span>
                    <el-tag style="float: right;" type="success" size="mini" effect="dark">本年</el-tag>
                </div>
                <h2>105</h2>
                <span>较上年同期提升</span>
                <span style="color: #13ce66;float:right;">
                    <span>16%</span>
                    <span class="el-icon-top"></span>
                </span>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>总成果数</span>
                    <el-tag style="float: right;" size="mini" effect="dark">本年</el-tag>
                </div>
                <h2>231</h2>
                <span>较上年同期提升</span>
                <span style="color: #1890ff;float:right;">
                    <span>22%</span>
                    <span class="el-icon-top"></span>
                </span>
            </el-card>
        </div>
        <div class="chart">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>成果类别分析</span>

                </div>
                <div class="chart-group">
                  <div
                    v-for="(item, index) in chartData"
                    :key="index"
                    class="chart-item"
                    ref="chart"
                    :style="{width: '24%', height: '400px'}"
                  ></div>
                </div>
            </el-card>
        </div>
        <div class="table" >
            <!-- 柱状图部分 -->
            <el-card style="width: 70%; margin-right: 10px; display: inline-block; height: 600px;">
                <div slot="header" class="clearfix">
                    <span>各方向发布比例</span>
                    <span style="float:right;">
                        <el-radio-group v-model="radio4" size="mini">
                            <el-radio-button label="天"></el-radio-button>
                            <el-radio-button label="月"></el-radio-button>
                            <el-radio-button label="年"></el-radio-button>
                        </el-radio-group>
                    </span>
                </div>
                <div class="chart-container">
                    <div ref="stackedBarChart" style="width: 100%; height: 500px"></div>
                </div>
            </el-card>

            <!-- 表格部分 -->
            <el-card style="width: 29%; display: inline-block;height: 600px;">
                <div slot="header" class="clearfix">
                    <span>作者榜单</span>
                </div>
                <div class="table-container">
                    <el-table :data="tableData" style="width: 100%" border>
                        <el-table-column label="排名" align="center" width="120">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>

                        <el-table-column prop="author" label="作者" align="left">
                            <template slot-scope="scope">
                                <el-tag size="small" type="primary">{{ scope.row.author }}</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column prop="submissions" label="提交数" align="right" width="120"/>

                        <el-table-column prop="approvals" label="通过数" align="right" width="120">
                            <template slot-scope="scope">
                                <span style="color:#67C23A;font-weight:500">
                                    {{ scope.row.approvals }}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>

    </div> 
</template>

<script>
import BarChart from './indexBar.vue';
import * as echarts from 'echarts';
export default {
    components: {
        BarChart
    },
    data() {
        return {
            radio4: "天",
            tableData: [],
            categories: [
              '能源战略', '智慧矿山', '新型储能',
              '分布式能源', '地清', 'CCUS',
              '节能减碳', '能源大数据', '能源软件'
            ],
            chartTypes: ['专利', '论文', '软著', '科研报告'],
            baseColors: [
              '#FDD379', '#F7C2CD', '#6270B7', '#BCD1BC', '#E68D3D', '#E26472',
              '#3188C1', '#C8E4D2', '#9FBBD5'
            ]
        };
    },
    created() {
      this.generateData()
    },
    computed: {
      chartData() {
        return this.chartTypes.map(type => ({
          name: type,
          data: this.generatePieData()
        }))
      }
    },

    mounted() {
      this.initChart(),

      this.$nextTick(() => {
        this.initChartsPie()
      })
    },
    methods: {
      generateData() {
        // 生成随机中文名
        const surnames = ['王', '李', '张', '刘', '陈', '杨', '赵', '黄', '周', '吴']
        const names = ['伟', '芳', '强', '敏', '磊', '丽', '军', '杰', '涛', '艳']

        // 生成10条数据
        const rawData = Array.from({length: 10}, () => ({
          author: `${this.randomItem(surnames)}${this.randomItem(names)}`,
          submissions: Math.floor(Math.random() * 50 + 1), // 1-50次提交
          approvals: 0 // 先初始化为0
        }))

        // 生成通过数（不超过提交数）
        rawData.forEach(item => {
          item.approvals = Math.floor(Math.random() * (item.submissions + 1))
        })

        // 按通过数降序排序
        this.tableData = rawData.sort((a, b) => b.approvals - a.approvals)
      },
      randomItem(arr) {
        return arr[Math.floor(Math.random() * arr.length)]
      },
      initChart() {
        const chart = echarts.init(this.$refs.stackedBarChart)

        // 自动生成数据函数
        const generateData = () => {
          const categories = ['论文', '专利', '软著', '科研报告', '标准', '成果转化']
          return categories.map(() =>
            Array(9).fill(0).map(() => Math.floor(Math.random() * 100) + 20)
          )
        }

        const option = {
          // color: ['#37939A','#304E7E', '#4F845C','#5867AF', '#3371B3', '#1abc9c', ],
          color: ['#FDD379', '#6270B7', '#BCD1BC', '#E68D3D', '#E26472', '#3188C1'],

          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          legend: {
            data: ['论文', '专利', '软著', '科研报告', '标准', '成果转化'],
            bottom: 0
          },
          grid: {
            left: '4%',
            right: '4%',
            bottom: '12%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [
              '能源战略', '智慧矿山', '新型储能',
              '分布式能源', '地清', 'CCUS',
              '节能减碳', '能源大数据', '能源软件'
            ],
            axisLabel: {
              rotate: 45
            }
          },
          yAxis: {
            type: 'value',
            name: '数量'
          },
          series: ['论文', '专利', '软著', '科研报告', '标准', '成果转化'].map((name, index) => ({
            name,
            type: 'bar',
            stack: '总量',
            barWidth: '40%',
            data: generateData()[index],
            label: {
              show: true,
              position: 'inside'
            }
          }))
        }

        chart.setOption(option)

        // 窗口调整时自适应
        window.addEventListener('resize', () => chart.resize())
        this.$once('hook:beforeDestroy', () => {
          window.removeEventListener('resize', () => chart.resize())
          chart.dispose()
        })
    },



    generatePieData() {
      return this.categories.map((name, index) => ({
        name,
        value: Math.floor(Math.random() * 1000) + 100,
        itemStyle: {
          color: this.baseColors[index]
        }
      }))
    },

    initChartsPie() {
      this.$refs.chart.forEach((chartDom, index) => {
        const chart = echarts.init(chartDom)
        const option = {
          title: {
            text: this.chartTypes[index],
            left: 'center',
            top: '45%',
            textStyle: {
              fontSize: 18,
              color: '#666'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [{
            name: this.chartTypes[index],
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: params => {
                return `{name|${params.name}}\n{value|${params.value}}`
              },
              rich: {
                name: {
                  fontSize: 11,
                  padding: [0, 0, 5, 0]
                },
                value: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#333'
                }
              }
            },
            labelLine: {
              length: 20,
              length2: 30
            },
            data: this.chartData[index].data
          }]
        }
        chart.setOption(option)

        // 响应式
        window.addEventListener('resize', () => chart.resize())
        this.$once('hook:beforeDestroy', () => {
          window.removeEventListener('resize', () => chart.resize())
          chart.dispose()
        })
      })
    }


  }
};
</script>


<style>
.index-page {
    background-color: #f3f3f4;
    height: 100%;
    padding: 20px;
}
.card-list {
    font-size: 14px;
    display: flex;
    justify-content: space-between;


}
.card-list > * {
    width: 20%;
}
.chart, .table {
    margin-top: 20px;
}
.index-page table {
    width: 100%!important;
}
.chart-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}


.table-container {
  padding: 20px;
  /* background: #fff; */
  border-radius: 8px;
  height: 500px; /* 设置与柱状图相同的高度 */
  /* box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); */
}

.el-table::before {
  height: 0;/*  /移除表格底部线 */
}

.el-tag {
  font-size: 14px;
  padding: 0 8px;
}

.chart-group {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  /* box-shadow: 0 2px 12px rgba(0,0,0,0.1); */
}

.chart-item {
  position: relative;
  transition: transform 0.3s;
}

.chart-item:hover {
  transform: translateY(-5px);
}
</style>
